﻿html
{
    overflow: hidden;
}

a:link, a:visited , a:hover, a:active
{
    color: White;
    text-decoration: none;
}

div.tilesContainer
{
    width: 790px;
    height: 590px; /* == 4:3 ratio for tilesContainer.width */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -445px; /* == (0.5 * tilesContainer.width) - (div.sideBar + 16)/2 */
    margin-top: -285px; /* == half of tilesContainer.height * -1 */
 /*   background-color: Green; */  
}

div.websiteHeader
{
    position: absolute;
    left: 50%;
    margin-left: -445px; /* == (0.5 * tilesContainer.width) - (div.sideBar + 16)/2 */
    width: 790px; /* == tilesContainer.width */
    text-align: left;
    color: White;
}

span.counter
{
    position: absolute; 
    bottom: 0px; 
    right: 20px; 
    background-color: Black;
}

span.counter span
{
    font-size: 14pt;
}


/* Tiles */ 

/* general purpose image tile */ 
div.GeneircImageBackTile
{
    display: none;
    overflow: hidden;
}

div.GeneircImageBackTile img{
  top:0;
  left:0;
  width:100%;
  min-height: 100%;
}

/* general purpose H3 */ 
div.Tile_TopArticle h3, 
div.Tile_Top2ndArticle h3
{
    position: relative;
    margin-right: 20px; 
    margin-left: 20px; 
    font-size: 2em;
    font-weight: lighter; 
    display: inline-block;  
    text-align: center;
    width: 90%;
}

div.Tile_TopArticle h3
{
    margin-top: 80px; 
}


div.Tile_Top2ndArticle h3
{
    margin-top: 100px; 
}

div.Tile_Top3rdOr4thArticle h3
{
    position: relative;
    margin-right: 20px; 
    margin-left: 20px; 
    margin-top: 40px; 
    font-size: 1.2em;
    font-weight: lighter; 
    display: inline-block;  
    text-align: center;
}

div.Tile_1stTwitPic h3,
div.Tile_2ndTwitPic h3
{
    position: relative;
    margin-right: 20px; 
    margin-left: 20px; 
    margin-top: 20px; 
    font-size: 0.85em;
    font-weight: lighter; 
    display: inline-block;  
    text-align: left;
}

div.Tile_3rdTwitPic h3,
div.Tile_4thTwitPic h3
{
    position: relative;
    margin: 5px 5px 5px 20px;
    font-size: 0.75em;
    font-weight: lighter; 
    display: inline-block;  
    text-align: left;
}

div.Tile_1stOr2ndCategory h3,
div.Tile_3rdOr4thCategory h3
{
    text-align:center;
    position: relative;
    margin: 20px; 
    font-size: 1em;
    font-weight: lighter; 
    display: inline-block;  
}

div.Tile_Tweet h3
{
    text-align:left;
    margin: 5px 5px 5px 20px;  
    font-size: 0.7em;
    font-weight: lighter; 
    display: inline-block;  
}



/* top Article Tile */ 

div.Tile_TopArticle  
{
    width: 580px; 
    height: 240px; 
    position: relative;
}

div.Tile_TopArticle div
{
    width: 580px; 
    height: 240px;
}

div.Tile_TopArticle div.front
{
    background-color: #00B1DE;
    width: 100%;
}

/* 2nd top Article Tile */ 

div.Tile_Top2ndArticle  
{
    width: 370px; 
    height: 310px; 
    position: relative;
}

div.Tile_Top2ndArticle div
{
    width: 370px; 
    height: 310px; 
}

div.Tile_Top2ndArticle div.front
{
    background-color: #00B1DE;
}


/* 3rd top Article Tile */ 
/* 4th top Article Tile */ 

div.Tile_Top3rdOr4thArticle
{
    width: 200px; 
    height: 170px; 
    position: relative;
}

div.Tile_Top3rdOr4thArticle div
{
    width: 200px; 
    height: 170px;
}

div.Tile_Top3rdOr4thArticle div.front
{
    background-color: #00B1DE;
}


/* 1st top TwitPic Tile */ 

div.Tile_1stTwitPic
{
    width: 200px; 
    height: 140px; 
    position: relative;
}

div.Tile_1stTwitPic div
{
    width: 200px; 
    height: 140px;
}

div.Tile_1stTwitPic div.front
{
    background-color: #260930;
}

/* 2nd top TwitPic Tile */ 

div.Tile_2ndTwitPic
{
    width: 200px; 
    height: 120px; 
    position: relative;
}

div.Tile_2ndTwitPic div
{
    width: 200px; 
    height: 120px;
}

div.Tile_2ndTwitPic div.front
{
    background-color: #260930;
}

/* 3rd top TwitPic Tile */ 

div.Tile_3rdTwitPic
{
    width: 200px; 
    height: 60px; 
    position: relative;
}

div.Tile_3rdTwitPic div
{
    width: 200px; 
    height: 60px;
}

div.Tile_3rdTwitPic div.front
{
    background-color: #260930;
}

/* 4th top TwitPic Tile */ 

div.Tile_4thTwitPic
{
    width: 200px; 
    height: 60px; 
    position: relative;
}

div.Tile_4thTwitPic div
{
    width: 200px; 
    height: 60px;
}

div.Tile_4thTwitPic div.front
{
    background-color: #260930;
}

/* quad TwitPic Tile */ 

div.Tile_QuadTwitPic
{
    width: 200px; 
    height: 130px; 
    position: relative;
}

div.Tile_QuadTwitPic div
{
    width: 200px; 
    height: 130px;
}

div.Tile_QuadTwitPic div.front
{
    background-color: #260930;
}

div.Tile_QuadTwitPic div.back
{
    background-color: #260930;
    display: none;
}

div.Tile_QuadTwitPic img
{
    width: 100px; 
    height: 65px; 
    display: block; 
}


/* 1st category Tile */ 
/* 2nd category Tile */ 

div.Tile_1stOr2ndCategory
{
    width: 100px; 
    height: 60px; 
    position: relative;
}

div.Tile_1stOr2ndCategory div
{
    width: 100px; 
    height: 60px; 
}

div.Tile_1stOr2ndCategory div.front
{
    background-color: #E2A019;
    text-align: center;
}


/* 3rd category Tile */ 
/* 4th category Tile */ 

div.Tile_3rdOr4thCategory
{
    width: 90px; 
    height: 60px; 
    position: relative;
}

div.Tile_3rdOr4thCategory div
{
    width: 90px; 
    height: 60px; 
}

div.Tile_3rdOr4thCategory div.front
{
    background-color: #E2A019;
    text-align: center;
}

/* Twitter tile */ 

div.Tile_Tweet
{
    width: 580px; 
    height: 20px; 
    position: relative;
}

div.Tile_Tweet div
{
    width: 580px; 
    height: 20px; 
}

div.Tile_Tweet div.front
{
    background-color: #C92445;
}

div.Tile_Tweet div.back
{
    display: none;
    background-color: #C92445;
    overflow: hidden;
}
